<template>
    <div>
        <div class="body-content">
            <div class="content-main">
                <div class="tit-new">资讯</div>
                <div class="min-list w">
                    <div class="list-box">
                        <router-link :to="{path:'/newsDetail',query:{id:item.id}}" v-for="(item,index) in detail" :key="index">
                            <div class="img">
                                <div class="img-box" :style="{'background-image': 'url('+getImage(item.coverImageUrl)+')'}"></div>
                            </div>
                            <div class="types"><i class="iconfont icon-zhengce"></i>{{item.type == 1 ? '移民' : '集团'}}</div>
                            <p>{{item.title}}</p>
                            <span class="time" style="padding:0 15px;">{{item.createTime.split(" ")[0]}}</span>
                            <span class="click"><i class="iconfont icon-zuihuo"></i>{{Math.floor((Math.random()*10000)+100)}}</span>
                        </router-link>
                    </div>

                    <div class="add" v-if="totalPage > limit" @click="addPushList">浏览更多</div>
                </div>
            </div>
        </div>
        <loading :loadingState="loadingState" />
    </div>
</template>
<script>
import loading from "@/components/loading.vue";
import httpApi from '@/api/index'

import { mapGetters } from 'vuex'
export default {
    data(){
        return{
            detail: [],
            totalPage: 0,
            pageIndex: 1,
            limit: 9,
            loadingState: true
        }
    },
    created() {
        this.getDetail(this.pageIndex);
    },
    methods: {
        getImage(url){
            return this.baseApi + url;
        },
        addPushList() {
            this.pageIndex++;
            this.getDetail(this.pageIndex);
        },
        getDetail(pageIndex) {
            let params = {
                limit: this.limit,
                page: pageIndex,
            }
            httpApi.getNews(params).then(res => {
                let data = res.data;
                if(data.length > 0){
                    data.forEach(item => {
                        this.detail.push(item)
                    });
                    this.totalPage = res.total;
                }else{
                    this.totalPage = 0;
                }
                this.loadingState = false;
            })
        },
    },
    components: {
        loading
    },
    computed: {
        ...mapGetters([ 'baseApi' ])
    },
}
</script>
<style lang="scss" scoped>
    @import "src/assets/css/news-index";
</style>